<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理员注册</title>
    <!--字体图标-->
    <link href="javaex/pc/css/icomoon.css" rel="stylesheet" />
    <!--动画-->
    <link href="javaex/pc/css/animate.css" rel="stylesheet" />
    <!--骨架样式-->
    <link href="javaex/pc/css/common.css" rel="stylesheet" />
    <!--皮肤（缇娜）-->
    <link href="javaex/pc/css/skin/tina.css" rel="stylesheet" />
    <!--jquery，不可修改版本-->
    <script src="javaex/pc/lib/jquery-1.7.2.min.js"></script>
    <!--全局动态修改-->
    <script src="javaex/pc/js/common.js"></script>
    <!--核心组件-->
    <script src="javaex/pc/js/javaex.min.js"></script>
    <!--表单验证-->
    <script src="javaex/pc/js/javaex-formVerify.js"></script>
</head>
<style>
    .block{
        width: 800px;
        height: 450px;
        margin-top: 120px;
    }
    body{
        background-image: url("http://img.javaex.cn/FipOsQoe90u_7i3dOVpaeX5QD7c6");
    }
</style>
<body>
    <div class="list-content">
        <!--块元素-->
        <div class="block">
            <!--修饰块元素名称-->
            <div class="banner">
                <p class="tab fixed">管理员注册</p>
            </div>
            <!--正文内容-->
            <div class="main">
                <form id="form">
                    <!--文本框-->
                    <div class="unit clear">
                        <div class="left"><span class="required">*</span><p class="subtitle">用户名</p></div>
                        <div class="right">
                            <input type="text" class="text username" name="username" data-type="登录名" error-msg="只能输入5-10个以字母开头，可带数字的字符串" error-pos="42" placeholder="请输入用户名"/>
                        </div>
                    </div>
                    <!--文本框-->
                    <div class="unit clear">
                        <div class="left"><span class="required">*</span><p class="subtitle">密码</p></div>
                        <div class="right">
                            <input type="text" class="text password"  name="password" data-type="" error-msg="" error-pos="" placeholder="请输入密码" />
                        </div>
                    </div>
                    <!--单选框-->
                    <div class="unit clear">
                        <div class="left"><p class="subtitle">性别</p></div>
                        <div class="right">
                            <ul class="equal-8 clear">
                                <li><input type="radio" class="fill sex " name="sex" value="男" checked/>男</li>
                                <li><input type="radio" class="fill sex" name="sex" value="女"/>女</li>
                            </ul>
                        </div>
                    </div>
                    <!--文本框-->
                    <div class="unit clear">
                        <div class="left"><span class=""></span><p class="subtitle">QQ</p></div>
                        <div class="right">
                            <input type="text" class="text qqNumber" data-type="QQ" name=qqNumber  error-msg="请输入正确的QQ" error-pos="42" placeholder="请输入QQ"/>
                        </div>
                    </div>
                    <!--文本框-->
                    <div class="unit clear">
                        <div class="left"><span class=""></span><p class="subtitle">电话</p></div>
                        <div class="right">
                            <input type="text" class="text phoneNumber" data-type="手机号"  name="phoneNumber" error-msg="请输入正确的手机号" error-pos="42" placeholder="请输入电话"/>
                        </div>
                    </div>
                    <!--文本框-->
                    <div class="unit clear">
                        <div class="left"><span class="required">*</span><p class="subtitle">邮箱</p></div>
                        <div class="right">
                            <input type="text" class="text email" data-type="邮箱" name="email" error-msg="请输入正确的邮箱地址" error-pos="42" placeholder="请输入邮箱"/>
                        </div>
                    </div>
                    <!--提交按钮-->
                    <div class="unit clear" style="width: 800px;">
                        <div style="text-align: center;">
                            <!--表单提交时，必须是input元素，并指定type类型为button，否则ajax提交时，会返回error回调函数-->
                            <input type="button" id="return" class="button no" value="返回" />
                            <input type="button" id="save" class="button yes" value="保存" @click="checkName"/>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var form = new Vue({
        el: "#form",
        methods: {
            checkName: function(data) {
                axios.post("http://cube-online.lstf666.cn:8083/Cube-Online/admin/register", "name=张三").then(
                    function(response) {
                        console.log(response);
                        // console.log(response.data);
                    }
                ).catch(
                    function(error) {
                        console.log("发生了错误：" + error);
                    })

            }
        }
    })
</script>

</html>